<template>
  <div class="rankingList">
    <div class="areaTitle">
      <i class="iconfont icon-return" @click="$router.push('/myvideo')"></i>
      <p>MV排行榜</p>
    </div>
    <!-- <ul class="areaList">
      <li><router-link to="/rankingList/inland">内地</router-link></li>
      <li><router-link to="/rankingList/hongKong">港台</router-link></li>
      <li><router-link to="/rankingList/america">欧美</router-link></li>
      <li><router-link to="/rankingList/korea">韩国</router-link></li>
      <li><router-link to="/rankingList/japan">日本</router-link></li>
    </ul> -->
    <div class="views">
         <router-view ></router-view>
    </div>
   
  </div>
</template>

<script>

export default {
  components: {},
  props: {},
  data() {
    return {
     
    };
  },
  watch: {},
  computed: {},
  methods: {
      
  },
  created() {
    
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.rankingList {
  .areaTitle {
    width: 100%;
    height: vw(50);
    line-height: vw(30);
    display: flex;
    align-items: center;
    padding: 0 vw(10);
    position: fixed;
    top:0;
    left: 0;
    background: #fff;
    z-index: 10;
    i {
      font-size: vw(26);
      padding-top: vw(3);
    }
    p {
      font-size: vw(18);
      font-weight: bold;
      padding-left: vw(10);
    }
  }
  .areaList{
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-bottom: vw(1) solid #ccc;
      margin-top: vw(10);
      position: fixed;
      top: vw(30);
      left: 0;
      background: #fff;
      z-index: 10;
      li{
          width: 20%;
          height: vw(30);
          line-height: vw(30);
          text-align: center;
          a{
              color: #333;
              font-size: vw(16);
              padding-bottom: vw(3);
          }
          .router-link-exact-active{
              color: red;
              font-size: vw(16);
              border-bottom: vw(2) solid #f00;
          }
      }
  }
  .views{
      margin-top: vw(30);
     
  }
}
</style>